<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Grade_code')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-grade_code" class="form-control" name="row[grade_code]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Grade_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-grade_name" data-rule="required" class="form-control" name="row[grade_name]" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">*职称标准:</label>
        <div class="col-xs-12 col-sm-10">
            <div class="table-responsive" style="overflow-x: auto;">
                <dl class="fieldlist" data-name="row[work_details]" data-template="tpl_work_details" style="min-width: 1000px;">
                    <dd class="form-inline header-box-title">
                        <ins style="width:50px">序号</ins>
                        <ins style="width:80px">细项名称</ins>
                        <ins style="width:75px">结算方式</ins>
                        <ins style="width:150px; font-size: 12px; line-height: 1.2;">
                            <div style="text-align: center; margin-bottom: 2px;">通过奖励(元)</div>
                            <div style="display: flex; justify-content: space-between; font-size: 11px; border-top: 1px solid #ddd;">
                                <span style="flex: 1; text-align: center; border-right: 1px solid #ddd; padding: 2px 0;">主责</span>
                                <span style="flex: 1; text-align: center; padding: 2px 0;">次责</span>
                            </div>
                        </ins>
                        <ins style="width:150px; font-size: 12px; line-height: 1.2;">
                            <div style="text-align: center; margin-bottom: 2px;">额外奖励(元)</div>
                            <div style="display: flex; justify-content: space-between; font-size: 11px; border-top: 1px solid #ddd;">
                                <span style="flex: 1; text-align: center; border-right: 1px solid #ddd; padding: 2px 0;">主责</span>
                                <span style="flex: 1; text-align: center; padding: 2px 0;">次责</span>
                            </div>
                        </ins>
                        <ins style="width:300px">工作内容</ins>
                        <ins style="width:100px" class="operation-header" style="background-color: #f6f1ff !important;">操作</ins>
                    </dd>
                    <dd class="form-inline"><a href="javascript:;" id="btn_add_row_work_details" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 添加一行</a></dd>
                </dl>
            </div>
            <!--1.组长,2.图像员,3.资料员,4.申报员,5.写作员,6.业绩专员,7.继续教育,8.科研,9.专利,10.软著,11.论文-->
            <textarea name="row[work_details]" class="form-control hide" cols="30" rows="5">
                [{"seq_no":"1","work_detail_name":"组长","payment_types":"1","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"2","work_detail_name":"图像员","payment_types":"1","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"3","work_detail_name":"资料员","payment_types":"1","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"4","work_detail_name":"申报员","payment_types":"1","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"5","work_detail_name":"写作员","payment_types":"1","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"6","work_detail_name":"业绩专员","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"7","work_detail_name":"继续教育","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"8","work_detail_name":"科研","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"9","work_detail_name":"专利","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"10","work_detail_name":"软著","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""},
                {"seq_no":"11","work_detail_name":"论文","payment_types":"2","price_primary":"","price_secondary":"","reward_primary":"","reward_secondary":"","job_content":""}]
            </textarea>
            <!--定义模板，模板语法使用Art-Template模板语法-->
            <script type="text/html" id="tpl_work_details">
                <dd class="form-inline">
                    <input type="text" style="width: 50px" name="row[<%=name%>][<%=index%>][seq_no]" class="form-control" value="<%=row.seq_no%>" size="30" readonly/>
                    <input type="text" style="width:80px" name="row[<%=name%>][<%=index%>][work_detail_name]" class="form-control" value="<%=row.work_detail_name%>" size="30" readonly/>
                    <select style="width:75px" name="row[<%=name%>][<%=index%>][payment_types]" class="form-control">
                        <option value="1" <%=row.payment_types=='1'?'selected':''%>>按订单</option>
                        <option value="2" <%=row.payment_types=='2'?'selected':''%>>计件</option>
                    </select>
                    <!-- 通过奖励 - 主责和次责 -->
                    <div style="width:150px; display: flex; flex-direction: row; gap: 5px;">
                        <input type="number" style="width:70px;" name="row[<%=name%>][<%=index%>][price_primary]" step="0.01" class="form-control" value="<%=row.price_primary%>" placeholder="主责" size="30"/>
                        <input type="number" style="width:70px;" name="row[<%=name%>][<%=index%>][price_secondary]" step="0.01" class="form-control" value="<%=row.price_secondary%>" placeholder="次责" size="30"/>
                    </div>
                    <!-- 额外奖励 - 主责和次责 -->
                    <div style="width:150px; display: flex; flex-direction: row; gap: 5px;">
                        <input type="number" style="width:70px;" name="row[<%=name%>][<%=index%>][reward_primary]" step="0.01" class="form-control" value="<%=row.reward_primary%>" placeholder="主责" size="30"/>
                        <input type="number" style="width:70px;" name="row[<%=name%>][<%=index%>][reward_secondary]" step="0.01" class="form-control" value="<%=row.reward_secondary%>" placeholder="次责" size="30"/>
                    </div>
                    <textarea style="width:300px; height:70px; resize:none;" name="row[<%=name%>][<%=index%>][job_content]" class="form-control" placeholder="请输入工作内容"><%=row.job_content%></textarea>
                    <div class="btn-container">
                        <!-- <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-trash-o"></i></span>  -->
                        <!-- <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span> -->
                    </div>
                </dd>
            </script>
        </div>
    </div>
 
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>

<style>
    .input-group > .msg-box.n-right{
        left: 130px;
    }
    .fieldlist{
        width: 115%;
        background:#f9f9f9;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .fieldlist .form-inline.header-box-title{
        background-color: #f6f1ff !important;
        border-bottom: 2px solid #ddd;
        padding: 8px 5px;
        margin: 0;
        display: flex;
        align-items: center;
    }
    .fieldlist .form-inline.header-box-title ins{
        background-color: #f6f1ff !important;
        padding: 5px;
        display: inline-block;
        font-weight: bold;
        border-right: 1px solid #ddd;
        text-align: center;
        min-height: 20px;
        line-height: 20px;
        vertical-align: middle;
        box-sizing: border-box;
        flex-shrink: 0;
    }
    .fieldlist .form-inline.header-box-title ins:last-child {
        border-right: none;
    }
 
    .fieldlist .form-inline {
        padding: 8px 5px;
        border-bottom: 1px solid #eee;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .fieldlist .form-inline:nth-child(odd){
        background-color: #f6f1ff;
    }
    .fieldlist .form-inline:nth-child(even){
        background-color: #fff;
    }
    .fieldlist .form-inline > * {
        margin-right: 5px;
        flex-shrink: 0;
    }
    .fieldlist .form-inline input,
    .fieldlist .form-inline select,
    .fieldlist .form-inline textarea {
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 4px 6px;
        height: 34px;
        box-sizing: border-box;
    }
    .fieldlist .form-inline textarea {
        resize: none;
        vertical-align: top;
        height: 60px;
    }
    .table-responsive {
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow-x: auto;
    }
    .btn-remove, .btn-dragsort {
        margin: 2px;
        display: inline-block !important;
        visibility: visible !important;
        padding: 4px 8px;
        height: 26px;
        line-height: 18px;
    }
    .fieldlist .form-inline .btn-container {
        width: 100px;
        text-align: center;
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        min-width: 100px;
        visibility: visible !important;
        height: 34px;
        border: none;
        background-color: transparent;
        box-sizing: border-box;
    }
    .btn-append {
        margin: 10px 0;
    }
</style>
